<template>
	<view :class="themeName">

		<u-tabs-swiper ref="tabs" :list="tabsList" :current="tabsIndex" :is-scroll="false"
			active-color="rgba(64, 115, 250, 1)" bar-width="60" :bold="false" @change="changeCurrentTab">
		</u-tabs-swiper>

		<view class="store-setting-item p-30">

			<view class="item-box flex">
				<view class="title">{{$zhTran('店铺名称')}}：</view>
				<u-input v-model="formModel.title" :placeholder="$zhTran('请填写店铺名称')"
					style="width: calc(100% - 160rpx);" />
			</view>

			<view class="item-box">
				<view class="flex">
					<view class="title">{{$zhTran('利润设置')}}：</view>
					<u-input v-model="formModel.profit_discount" :placeholder="$zhTran('请填写')"
						style="width: calc(100% - 200rpx);" />
					<view class="title">%</view>
				</view>
				<u-divider half-width="100%" :use-slot="false"></u-divider>
				<view class="desc">
					{{$zhTran('*默认利润点0%；商城利润点可自定义，系统会根据您在下单系统中的拿货价自动计算您对外的商品价格，无需一一设置，如需设置特定商品利润，则在特定商品重修改即可；如A商品您的拿货价是100元，利润点为0%；则您的商城对外的售价=100+(100*0%)=100元')}}
				</view>
			</view>

			<view class="item-box">
				<view class="flex">
					<view class="title">{{$zhTran('最低利润设置')}}：</view>
					<u-input v-model="formModel.min_profit_discount" :placeholder="$zhTran('请填写')"
						style="width: calc(100% - 260rpx);" />
					<view class="title">%</view>
				</view>
				<u-divider half-width="100%" :use-slot="false"></u-divider>
				<view class="desc">{{$zhTran('*该利润为商品最低利润，如商品利润低于最低利润，则无法购买!')}}</view>
			</view>

			<view class="item-box">
				<view class="flex row-between">
					<view class="title">{{$zhTran('结算折扣率')}}：</view>
					<view class="title">{{formModel.store_cost_price}}%</view>
				</view>
			</view>

			<view class="item-box">
				<view class="flex row-between">
					<view class="title">{{$zhTran('零售价包含利润率')}}：</view>
					<view class="title">{{formModel.retail_profit}}%</view>
				</view>
			</view>

			<view class="item-box">
				<view class="flex row-between">
					<view class="title">{{$zhTran('当前利润率')}}：</view>
					<view class="title">{{formModel.real_profit}}%</view>
				</view>
			</view>

			<view class="item-box">
				<view class="title">{{$zhTran('服务费用')}}：</view>
				<view class="flex m-t-20">
					<u-input v-model="formModel.service_type_desc" type="select" :placeholder="$zhTran('请选择')" border
						@click="selectData" />
					<u-input v-model="formModel.service_value" :placeholder="$zhTran('请填写服务费用')"
						style="width: calc(100% - 270rpx);margin-left: 10rpx;" />
					<view class="title" v-if="!formModel.service_type">{{$zhTran('元')}}</view>
					<view class="title" v-if="formModel.service_type">%</view>
				</view>
			</view>

			<view class="item-box flex">
				<view class="title">{{$zhTran('联系电话')}}：</view>
				<u-input v-model="formModel.mobile" :placeholder="$zhTran('请填写联系电话')"
					style="width: calc(100% - 160rpx);" />
			</view>

			<view class="item-box flex row-between">
				<view class="m-r-50">
					<view class="title">{{$zhTran('上传微信二维码')}}</view>
					<view class="desc">{{$zhTran('*此项上传的是您的微信添加好友的二维码，方便客户联系时添加')}}</view>
				</view>
				<block v-if="formModel.wechat_qrcode!=''">
					<view class="m-10" style="width: 160rpx;height: 160rpx;position: relative;">
						<u-image :src="formModel.wechat_qrcode" style="width: 100%;" mode="widthFix"></u-image>
						<view class="u-delete-icon" @tap.stop="deleteItem('wechat_qrcode')" :style="{
					background: '#fa3534'
				}">
							<u-icon size="20" color="#ffffff" name="close"></u-icon>
						</view>
					</view>
				</block>
				<uploader v-model="formModel.wechat_qrcode" :deletable="true" preview-size="160rpx" :maxUpload="1"
					image-fit="aspectFill" :maxSize="maxSize" v-else />
			</view>

			<view class="item-box flex row-between">
				<view class="m-r-50">
					<view class="title">{{$zhTran('上传店铺Logo')}}</view>
					<view class="desc">{{$zhTran('*此项上传的是您的店铺头像，方便客户识别')}}</view>
				</view>
				<block v-if="formModel.avatar!=''">
					<view class="m-10" style="width: 160rpx;height: 160rpx;position: relative;">
						<u-image :src="formModel.avatar" style="width: 100%;" mode="widthFix"></u-image>
						<view class="u-delete-icon" @tap.stop="deleteItem('avatar')" :style="{
					background: '#fa3534'
				}">
							<u-icon size="20" color="#ffffff" name="close"></u-icon>
						</view>
					</view>
				</block>
				<uploader v-model="formModel.avatar" :deletable="true" preview-size="160rpx" :maxUpload="1"
					image-fit="aspectFill" :maxSize="maxSize" v-else />
			</view>

		</view>
		<view class="functions">
			<button class="apply-btn" @click="saveCofing">{{$zhTran('保存')}}</button>
		</view>

		<u-select v-model="selectShow" :defaultValue="defaultValue" :confirm-color="themeColor" cancel-color="#999"
			@confirm="dataChange($event)" :list="data_list"></u-select>

		<u-modal v-model="showResult" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="$zhTran('关闭')" @cancel="showResult=false" cancel-color="rgba(38, 38, 38, 1)"
			border-radius="10" :show-confirm-button="false">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gou2.png')" width="300" height="300"
						mode="widthFix" v-if="alertRes.status"></u-image>
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix" v-else></u-image>
				</view>

				<view class="title m-t-20">{{alertRes.title}}</view>
				<view class="desc m-t-10">{{alertRes.desc}}</view>
			</view>
		</u-modal>
	</view>
</template>


<script>
	import {
		apiCloudShopStoreInfo,
		apiCloudShopSettingSave,
		apiUpdateStoreGoodsPrice
	} from "@/api/cloudshop"
	export default {
		name: 'storeSetting',
		data() {
			return {
				formModel: {},
				maxSize: 1 * 1024 * 1024,
				tabsList: [{
					name: this.$zhTran('店铺设置'),
				}, {
					name: this.$zhTran('店铺升级'),
				}],
				tabsIndex: '0',
				clsp_id: '',
				alertRes: {
					status: 1,
					title: '',
					desc: ''
				},
				data_list: [{
						value: 0,
						label: this.$zhTran('固定金额')
					},
					{
						value: 1,
						label: this.$zhTran('商品售价百分比')
					}
				],
				defaultValue: [0],
				selectShow: false,
				showResult: false,
			}
		},

		methods: {
			changeCurrentTab(index) {
				console.log(index)
				if (index) {
					this.$toast({
						title: this.$zhTran("开发中敬请期待"),
					});
				}
				return
			},
			getCloudShopInfo() {
				apiCloudShopStoreInfo().then(res => {
					this.formModel = this.$zhTran(res);

					if (this.formModel.service_type == undefined || this.formModel.service_type == '') {
						this.formModel.service_type_desc = this.data_list[0].label
						this.formModel.service_type = this.data_list[0].value
					} else {
						var service_info = this.data_list.filter(item => item.value == this.formModel
							.service_type)
						this.formModel.service_type_desc = service_info[0].label
						this.defaultValue = [this.data_list.findIndex(item => item.value == this.formModel
							.service_type)]
					}
				})
			},
			selectData() {
				this.selectShow = true
			},
			dataChange(e) {
				this.formModel.service_type_desc = e[0].label
				this.formModel.service_type = e[0].value
			},
			deleteItem(field) {
				this.formModel[field] = ''
			},
			saveCofing() {
				apiCloudShopSettingSave({
					store_id: this.clsp_id,
					...this.formModel
				}).then((res) => {
					this.getCloudShopInfo()
					uni.showModal({
						content: this.$zhTran('保存成功，是否更新店铺价格'),
						confirmColor: this.themeColor,
						confirmText: this.$zhTran('更新'),
						success: async ({
							confirm
						}) => {
							try {
								if (confirm) {
									apiUpdateStoreGoodsPrice({
										store_id: this.clsp_id,
									}).then((res) => {
										this.$toast({
											title: this.$zhTran('更新成功')
										})
									}).catch(err => {
										this.$toast({
											title: this.$zhTran(err.msg)
										})
									})
								}
							} catch (errMsg) {
								console.log('clsp store update price:', errMsg)
							}
						}
					})
				}).catch(err => {
					this.$toast({
						title: this.$zhTran(err.msg)
					})
				})
			}
		},
		async onLoad() {
			const {
				clsp_id,
			} = this.$Route.query
			this.clsp_id = clsp_id
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.getCloudShopInfo()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	@import '@/components/uview-ui/libs/css/style.components.scss';

	.store-setting-item {
		height: calc(100vh - 200rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;

		.item-box {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.title {
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}

			.desc {
				color: rgba(166, 166, 166, 1);
				font-size: 24rpx;
				margin-top: 30rpx;
			}
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 30rpx constant(safe-area-inset-bottom) 30rpx;
		padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;
	}

	.apply-btn {
		background-color: rgba(64, 115, 250, 1);
		color: #fff;
		font-size: 28rpx;
	}

	.pop-result {
		.title {
			font-size: 32rpx;
			color: rgba(38, 38, 38, 1);
		}

		.desc {
			font-size: 24rpx;
			color: rgba(166, 166, 166, 1);
		}
	}

	.u-delete-icon {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 34rpx;
		height: 34rpx;
		@include vue-flex;
		align-items: center;
		justify-content: center;
	}

	.u-icon {
		@include vue-flex;
		align-items: center;
		justify-content: center;
	}
</style>